<html>
  <head>
    <title>Pie Chart</title>
	<link href="css/start/jquery-ui-1.8.11.custom.css" rel="stylesheet" type="text/css"/>
	<link href="css/course.css" rel="stylesheet" type="text/css"/>
    <script type="text/javascript" src="js/protovis-r3.2.js"></script>
	<script type="text/javascript" src="js/jquery-1.5.2.min.js"></script>
	<script>
	 $(document).ready(function() {
		var id = window.location.href.split('sectionID=')[1];
		$.ajax({
		  url: 'http/ccHTTP.php?action=get_row&sectionID='+id,
		  async: false,
		  dataType: 'json',
		  success: function (response) {
			//force create data and labels
			data = [parseInt(response.Percent_A), parseInt(response.Percent_B), parseInt(response.Percent_C),
					parseInt(response.Percent_D), parseInt(response.Percent_F), parseInt(response.Percent_W)];
			labels = ["A","B","C","D","F","W"];
			
			$("div#info").html("<center><h1>" + response.LastName + ", " + response.FirstName + "</h1>" +
							   "<h2>GPA: " + response.GPA + ", " + response.Semester + " " + response.Year +  "</h2></center>");
		  }
		});				
		
		var col = function(v) {
			if (v == 'A') return pv.Colors.category20().range()[4].color;
			if (v == 'B') return pv.Colors.category20().range()[0].color;
			if (v == 'C') return pv.Colors.category20().range()[2].color;
			if (v == 'D') return pv.Colors.category20().range()[8].color;
			if (v == 'F') return pv.Colors.category20().range()[6].color;
			return "#c7c7c7"; //W
		};
		
		/* Sizing and scales. */
		var w = 400,
			h = 400,
			r = w / 2,
			a = pv.Scale.linear(0, pv.sum(data)).range(0, 2 * Math.PI);

		/* The root panel. */
		var vis = new pv.Panel()
			.width(w)
			.height(h);

		/* The wedge, with centered label. */
		vis.add(pv.Wedge)
			.data(data)
			.bottom(w / 2)
			.left(w / 2)
			.outerRadius(r)
			.angle(a)			
			.fillStyle(function(d) col(labels[this.index]))
		  .anchor("center").add(pv.Label)
			.visible(function(d) d > 8)
			.textAngle(0)
			.text(function(d) data[this.index] + "%\n" + labels[this.index])
			.font(20 + "px sans-serif");
		vis.render();
	 });
	</script> 
  </head>
  
<body>
	<div id="info"></div>
</body>
   

</html>